<template>
  <div class="about app-container">
    <div class="content">
      <h2 class="alignc">关于麦阿尼翻译</h2>
      <h1 class="alignc">DeepL Pro — 快速、准确、安全的翻译</h1>

      <div class="aboutCtn1">
        <div class="abuoutItem">
          <div><img :src="a1" alt=""></div>
          <p class="text">
            无限量文本翻译<br>
            你可以随意翻译，并不受翻译量或每次翻译的字符数限制。
          </p>
        </div>
        <div class="abuoutItem">
          <div><img :src="a2" alt=""></div>
          <p class="text">
            翻译整篇文档<br>
            改变文档的语言，同时保留原有的格式，最有效地节省时间。
          </p>
        </div>
        <div class="abuoutItem">
          <div><img :src="a3" alt=""></div>
          <p class="text">
            扩展的用户自定义选项<br>
            自定义翻译器的翻译结果，并为你所用。
          </p>
        </div>
        <div class="abuoutItem">
          <div><img :src="a4" alt=""></div>
          <p class="text">
            数据绝对安全<br>
            享受世界领先的数据保护标准，你的文本在翻译后将被立即删除
          </p>
        </div>
      </div>

      <h1 class="alignc">使用方式及计划</h1>
      <div class="aboutCtn2">
        <div class="aboutItem">
          <div class="title">免费</div>
          <p class="text">
            限量的文本翻译<br>
            每月3份不可再编辑文件翻译上传大小上限为5MB的文件1份术语表，最多10个条目
          </p>
        </div>
        <div class="aboutItem">
          <div class="title">月会员</div>
          <p class="text">
            限量的文本翻译<br>
            每月3份不可再编辑文件翻译上传大小上限为5MB的文件1份术语表，最多10个条目
          </p>
        </div>
        <div class="aboutItem">
          <div class="title">半年会员</div>
          <p class="text">
            限量的文本翻译<br>
            每月3份不可再编辑文件翻译上传大小上限为5MB的文件1份术语表，最多10个条目
          </p>
        </div>
        <div class="aboutItem">
          <div class="title">年度会员</div>
          <p class="text">
            限量的文本翻译<br>
            每月3份不可再编辑文件翻译上传大小上限为5MB的文件1份术语表，最多10个条目
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import a1 from '@/assets/images/a1.png'
import a2 from '@/assets/images/a2.png'
import a3 from '@/assets/images/a3.png'
import a4 from '@/assets/images/a4.png'
</script>
<style lang="scss">
.about {

  .aboutCtn1 {
    width: 100%;
    background: #fff;
    padding: 60px 40px;
    display: flex;
    justify-content: space-between;
    border-radius: 6px;
    margin-bottom: 40px;
    .abuoutItem {
      width: 22%;
      img {
        width: 50px;
        height: 50px;
      }
      p {
        margin-top: 18px;
        line-height: 1.5;
        color: rgba(54, 54, 54, 1);
      }
    }
  }
  .aboutCtn2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    .aboutItem {
      width: 24%;
      background: #fff;
      border-radius: 6px;
      .title {
        padding: 16px 0;
        text-align: center;
        // font-weight: bold;
        font-size: 20px;
        border-bottom: 2px solid rgba(235, 235, 235, 1);;
      }
      .text {
        padding: 20px 20px 60px 20px;
        line-height: 2;
        color: rgba(54, 54, 54, 1);
        font-size: 16px;
      }
    }
  }
  .alignc {
    text-align: center;
  }
}
</style>
